<template>

  <layout
      tabbar="/pages/friends/index"
      navbar="none"
      :showBack="false"
      class="dark-theme"
      navbarBackgroundColor="#020303"
  >

      <!-- 导航栏 -->
      <tn-nav-bar
        fixed
        backgroundColor="#020303"
        :isBack="false"
        fontColor="#FFFFFF">
        <!-- 将筛选按钮从右侧移到左侧 -->
        <view slot="left" class="nav-left" v-if="!wxAuditMode" @click="showFilterOptions">
			<view class="filter-btn">
			  <text class="tn-icon-filter"></text>
			  <text class="btn-text">同城</text>
			</view>
        </view>

        <view class="nav-title">
      	密友速配
        </view>
      </tn-nav-bar>

	  <view class="container" :style="{paddingTop: vuex_status_bar_height + 44 + 'px' }">
		<!-- 卡片区域 -->
		<view class="cards-container" :style="{height: `calc(100vh - ${vuex_status_bar_height + 44 + 15 + 15 + 20 + 100 + (isIOS ? 30 : 0)}px)`}">
		  <!-- 加载动画 -->
		  <view class="loading-container" v-if="isLoading">
			<view class="loading-spinner"></view>
			<text class="loading-text">寻找中...</text>
		  </view>

		  <!-- 顶层卡片（单独处理） -->
		  <view
			class="card top-card"
			v-if="topUser"
			:style="topCardStyle"
			:class="{
			  'animate__animated': true,
			  'animate__slideOutLeft': currentAnimation === 'animate__slideOutLeft',
			  'animate__slideOutRight': currentAnimation === 'animate__slideOutRight',
			  'animate__bounceBack': currentAnimation === 'animate__bounceBack',
			  'like-direction': currentDirection === 'like',
			  'skip-direction': currentDirection === 'skip',
			  'vip-card': topUser.vip
			}"
			@touchstart="touchStart"
			@touchmove="touchMove"
			@touchend="touchEnd"
			@touchcancel="touchEnd"
			@tap="previewUserPhotos(topUser)"
		  >
			<!-- 添加分享按钮 - 微信小程序环境 -->
			<!-- #ifdef MP-WEIXIN -->
			<button class="share-btn" open-type="share" @tap.stop="shareUserCard(topUser)">
			  <text class="tn-icon-share"></text>
			</button>
			<!-- #endif -->

			<!-- 添加分享按钮 - 非微信小程序环境 -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="share-btn" @tap.stop="shareUserCard(topUser)">
			  <text class="tn-icon-share"></text>
			</view>
			<!-- #endif -->

			<!-- 添加刷新按钮 -->
			<!-- <view class="refresh-btn" v-if="!wxAuditMode" @tap.stop="refreshBottles">
			  <text class="tn-icon-refresh"></text>
			</view> -->

			<!-- 卡片内容 -->
			<view class="card-inner">
			  <!-- 方向指示器 -->
			  <view class="direction-indicator like-indicator" v-if="currentDirection === 'like'">
				<view class="indicator-icon tn-icon-like-fill"></view>
				<text class="indicator-text">喜欢</text>
			  </view>
			  <view class="direction-indicator skip-indicator" v-if="currentDirection === 'skip'">
				<view class="indicator-icon tn-icon-close"></view>
				<text class="indicator-text">跳过</text>
			  </view>

			  <!-- 用户头像区域 -->
			  <view class="card-image">
				<!-- 根据优先级显示图片 -->
				<template v-if="topUser.photos && topUser.photos.length > 0">
				  <image :src="topUser.photos[0]" mode="aspectFill"></image>
				</template>
				<template v-else-if="topUser.avatar">
				  <image :src="topUser.avatar" mode="aspectFill"></image>
				</template>
				<template v-else>
				  <!-- 神秘人CSS3动画 -->
				  <view class="mystery-person">
					<view class="mystery-circle"></view>
					<view class="mystery-head"></view>
					<view class="mystery-body"></view>
				  </view>
				</template>
				<!-- 渐变遮罩 -->
				<view class="image-gradient"></view>
				<!-- 添加照片数量指示器 -->
				<view class="photo-count" v-if="topUser.photoCount && topUser.photoCount > 0">
				  <view class="tn-icon-image"></view>
				  <text>{{topUser.photoCount}}张</text>
				</view>
			  </view>
			  <!-- 用户信息区域 -->
			  <view class="user-info">
				<view class="user-name-row">
				  <!-- 添加会员标识 -->
				  <view class="vip-badge" v-if="topUser.vip">
					<view class="tn-icon-vip-fill"></view>
					<text class="vip-text">VIP</text>
				  </view>
				  <!-- 添加认证标识 -->
				  <view class="verified-badge" v-if="topUser.verified">
					<view class="tn-icon-check"></view>
					<text class="verified-text">已认证</text>
				  </view>
				  <text class="user-name tn-text-bold" :class="{'vip-name': topUser.vip}">{{ topUser.name }}</text>
				  <!-- 添加性别图标 -->
				  <view class="gender-icon" :class="topUser.gender === 'male' ? 'male' : 'female'">
					<view v-if="topUser.gender === 'male'" class="tn-icon-sex-male"></view>
					<view v-else class="tn-icon-sex-female"></view>
				  </view>
				  <text class="user-age">{{ topUser.age }}岁</text>
				</view>
				<view class="user-location-row">
				  <view class="tn-icon-location"></view>
				  <text class="location-text">{{ topUser.location }}</text>
				  <text class="distance-text">{{ topUser.distance }}</text>
				</view>
				<view class="user-tags">
				  <view class="tag" v-for="(tag, tagIndex) in topUser.tags" :key="tagIndex">
					{{ tag }}
				  </view>
				</view>
				<view class="vip-privileges" v-if="topUser.vip">
				  <view class="privilege-tag">优先曝光</view>
				  <view class="privilege-tag">超级喜欢</view>
				</view>
				<view class="user-intro">
				  {{ topUser.intro }}
				</view>
			  </view>
			</view>
		  </view>

		  <!-- 底层卡片（不处理触摸事件） -->
		  <view
			v-for="(user, index) in backUsers"
			:key="user.id"
			:style="backCardStyles[index]"
			:class="['card', 'back-card', user.vip ? 'vip-card' : '']"
			@tap="previewUserPhotos(user)"
		  >
			<!-- 卡片内容 -->
			<view class="card-inner">
			  <!-- 用户头像区域 -->
			  <view class="card-image">
				<!-- 根据优先级显示图片 -->
				<template v-if="user.photos && user.photos.length > 0">
				  <image :src="user.photos[0]" mode="aspectFill"></image>
				</template>
				<template v-else-if="user.avatar">
				  <image :src="user.avatar" mode="aspectFill"></image>
				</template>
				<template v-else>
				  <!-- 神秘人CSS3动画 -->
				  <view class="mystery-person">
					<view class="mystery-circle"></view>
					<view class="mystery-head"></view>
					<view class="mystery-body"></view>
				  </view>
				</template>
				<!-- 渐变遮罩 -->
				<view class="image-gradient"></view>
				<!-- 添加照片数量指示器 -->
				<view class="photo-count" v-if="user.photoCount && user.photoCount > 1">
				  <view class="tn-icon-image"></view>
				  <text>{{user.photoCount}}张</text>
				</view>
			  </view>
			  <!-- 用户信息区域 -->
			  <view class="user-info">
				<view class="user-name-row">
				  <!-- 添加会员标识 -->
				  <view class="vip-badge" v-if="user.vip">
					<view class="tn-icon-vip-fill"></view>
					<text class="vip-text">VIP</text>
				  </view>
				  <!-- 添加认证标识 -->
				  <view class="verified-badge" v-if="user.verified">
					<view class="tn-icon-check"></view>
					<text class="verified-text">已认证</text>
				  </view>
				  <text class="user-name tn-text-bold" :class="{'vip-name': user.vip}">{{ user.name }}</text>
				  <!-- 添加性别图标 -->
				  <view class="gender-icon" :class="user.gender === 'male' ? 'male' : 'female'">
					<view v-if="user.gender === 'male'" class="tn-icon-sex-male"></view>
					<view v-else class="tn-icon-sex-female"></view>
				  </view>
				  <text class="user-age">{{ user.age }}岁</text>
				</view>
				<view class="user-location-row">
				  <view class="tn-icon-location"></view>
				  <text class="location-text">{{ user.location }}</text>
				  <text class="distance-text">{{ user.distance }}</text>
				</view>
				<view class="user-tags">
				  <view class="tag" v-for="(tag, tagIndex) in user.tags" :key="tagIndex">
					{{ tag }}
				  </view>
				</view>
				<view class="vip-privileges" v-if="user.vip">
				  <view class="privilege-tag">优先曝光</view>
				  <view class="privilege-tag">超级喜欢</view>
				</view>
				<view class="user-intro">
				  {{ user.intro }}
				</view>
			  </view>
			</view>
		  </view>

		  <!-- 没有更多卡片时显示 -->
		  <view class="no-more-cards" v-if="users.length === 0 && !isLoading">
			<view class="no-cards-icon tn-icon-rocket-fill"></view>
			<text class="no-cards-text">今日推荐已完成</text>
			<text class="no-cards-subtext">12点整推荐更多好友</text>
			<view class="countdown-timer" v-if="nextRecommendTime">
			  <text>距离下次推荐还剩：</text>
			  <text class="time">{{nextRecommendTimeFormatted}}</text>
			</view>
			<view class="no-cards-buttons" v-if="!wxAuditMode">
			  <view class="action-btn vip-btn" @click="promptVipUpgrade">
				<view class="tn-icon-vip-fill vip-icon"></view>
				<text>立即推荐</text>
			  </view>
			  <view class="action-btn bottle-btn-large" @click="sendBottle">
				<view class="bottle-icon-large">
				  <view class="bottle-neck"></view>
				  <view class="bottle-body">
					<view class="bottle-wave"></view>
				  </view>
				</view>
				<text>扔漂流瓶</text>
				<view class="bottle-count" v-if="remainBottleCount > 0">{{remainBottleCount}}</view>
			  </view>
			</view>
		  </view>
		</view>

		<!-- 底部操作按钮区域 -->
		<view class="action-buttons" v-if="users.length > 0 && !isLoading">
		  <!-- 跳过按钮（始终显示） -->
		  <view class="action-btn skip-btn" @click="skipUser" :class="{ 'btn-active': currentDirection === 'skip' }">
			<view class="btn-icon tn-icon-close"></view>
		  </view>

		  <!-- 条件显示部分 -->
		  <block v-if="topUser && !wxAuditMode">
			<!-- 微信按钮 -->
			<view class="action-btn wechat-btn" @click="addWechat">
			  <view class="btn-icon tn-icon-wechat"></view>
			  <view class="btn-count" v-if="remainAddWeixinCount > 0">{{remainAddWeixinCount}}</view>
			</view>

			<!-- 更多按钮 -->
			<!-- <view class="action-btn more-btn" @click="toggleMoreOptions">
			  <view class="btn-icon tn-icon-message-fill"></view>
			</view> -->

			<!-- 漂流瓶按钮 -->
			<view class="action-btn bottle-btn" @click="sendBottle">
			  <view class="bottle-icon">
				<view class="bottle-neck"></view>
				<view class="bottle-body">
				  <view class="bottle-wave"></view>
				</view>
			  </view>
			  <view class="btn-count" v-if="remainBottleCount > 0">{{remainBottleCount}}</view>
			</view>

		  </block>

		  <!-- 不能添加微信时显示的按钮 -->
		  <block v-else>
			<!-- 漂流瓶按钮 -->
			<view v-if="!wxAuditMode" class="action-btn bottle-btn" @click="sendBottle">
			  <view class="bottle-icon">
				<view class="bottle-neck"></view>
				<view class="bottle-body">
				  <view class="bottle-wave"></view>
				</view>
			  </view>
			  <view class="btn-count" v-if="remainBottleCount > 0">{{remainBottleCount}}</view>
			</view>
			<!-- 私信按钮 -->
			<!-- <view v-if="!wxAuditMode" class="action-btn message-btn" @click="messageUser">
			  <view class="btn-icon tn-icon-message-fill"></view>
			</view> -->
		  </block>

		  <!-- 喜欢按钮（始终显示） -->
		  <view class="action-btn like-btn" @click="likeUser" :class="{ 'btn-active': currentDirection === 'like' }">
			<view class="btn-icon tn-icon-like-fill"></view>
		  </view>
		</view>

		<!-- 更多选项弹出菜单 -->
		<view class="more-options" v-if="showMoreOptions && topUser && topUser.canAddWechat">
		  <view class="more-option bottle-option" @click="sendBottle">
			<view class="bottle-icon-small">
			  <view class="bottle-neck"></view>
			  <view class="bottle-body">
				<view class="bottle-wave"></view>
			  </view>
			</view>
			<text class="option-text">漂流瓶</text>
			<view class="option-count" v-if="remainBottleCount > 0">{{remainBottleCount}}</view>
		  </view>
		  <view class="more-option message-option" @click="messageUser">
		  			<view class="option-icon tn-icon-message-fill"></view>
		  			<text class="option-text">私信</text>
		  </view>
		  <view class="more-option cancel-option" @click="toggleMoreOptions">
			<view class="option-icon tn-icon-close"></view>
			<text class="option-text">取消</text>
		  </view>
		</view>

		<!-- 点击喜欢时的心形动画 -->
		<view class="heart-animation" v-if="showHeartAnimation">
		  <view class="heart-icon tn-icon-like-fill"></view>
		</view>

		<!-- 点击跳过时的叉号动画 -->
		<view class="cross-animation" v-if="showCrossAnimation">
		  <view class="cross-icon tn-icon-close"></view>
		</view>

		<!-- 匹配成功弹窗 -->
		<view class="match-popup" v-if="showMatchPopup && matchedUser">
		  <view class="match-content animate__animated animate__zoomIn">
			          <view class="match-title">发送超级喜欢成功</view>
			<view class="match-hearts">
			  <view class="match-heart heart1 tn-icon-like-fill"></view>
			  <view class="match-heart heart2 tn-icon-like-fill"></view>
			  <view class="match-heart heart3 tn-icon-like-fill"></view>
			</view>
			<view class="match-avatars">
			  <view class="avatar-container your-avatar">
				<!-- 当前用户没有头像时显示神秘人 -->
				<template v-if="currentUserAvatar">
				  <image :src="currentUserAvatar" mode="aspectFill"></image>
				</template>
				<template v-else>
				  <!-- 神秘人CSS3动画 -->
				  <view class="mystery-person-small">
					<view class="mystery-circle-small"></view>
					<view class="mystery-head-small"></view>
					<view class="mystery-body-small"></view>
				  </view>
				</template>
			  </view>
			  <view class="avatar-connector">
				<view class="connector-heart tn-icon-like-fill"></view>
			  </view>
			  <view class="avatar-container match-avatar">
				<!-- 匹配用户没有头像时显示神秘人 -->
				<template v-if="matchedUser.avatar">
				  <image :src="matchedUser.avatar" mode="aspectFill"></image>
				</template>
				<template v-else>
				  <!-- 神秘人CSS3动画 -->
				  <view class="mystery-person-small">
					<view class="mystery-circle-small"></view>
					<view class="mystery-head-small"></view>
					<view class="mystery-body-small"></view>
				  </view>
				</template>
			  </view>
			</view>
			<view class="match-name">{{ matchedUser.name || '神秘用户' }}</view>
			<view class="match-desc">超级喜欢已发送给{{ matchedUser.name || '神秘用户' }}，等待回应</view>
			<view class="match-buttons">
			  <view class="match-btn continue-btn" @click="closeMatchPopup">继续浏览</view>
			  <view class="match-btn chat-btn" @click="goToChat">马上聊天</view>
			</view>
		  </view>
		</view>

		<!-- 操作结果提示 -->
		<tn-toast ref="toast"></tn-toast>

		<!-- 筛选选项模态框 - 使用FilterPopup组件替换 -->
		<filter-popup
		  v-model="showFilterModal"
		  :filter-options="filterOptions"
		  :interests="gameOptions"
		  @apply="applyFilters"
		  @reset="resetFilters"
		  @close="closeFilterModal"
		></filter-popup>

		<!-- 替换为组件 -->
		<drifting-bottles
		  ref="bottlesComponent"
		  :max-bottles="maxBottles"
		  :bottle-size="bottleSize"
		  :showBackToTop="wxAuditMode"
		  @openVip="openVip"
		  @showUnlockBottle="showUnlockBottleModal = true"
		/>

		<!-- 添加资料完善引导组件 -->
		<profile-guide
		/>

		<!-- 添加VIP弹窗组件 -->
		<vip-popup
		  :show.sync="isVipModalVisible"
		  :userInfo="userInfo"
		  @purchase-success="onVipPurchaseSuccess"
		></vip-popup>

		<!-- 添加解锁微信弹窗组件 -->
		<unlock-message-modal
		  v-if="showUnlockWechatModal"
		  :visible="showUnlockWechatModal"
		  :scene-id="'wechat'"
		  @close="showUnlockWechatModal = false"
		  @show-vip="isVipModalVisible = true"
		  @unlock-success="onWechatUnlockSuccess"
		></unlock-message-modal>

		<!-- 添加解锁漂流瓶弹窗组件 -->
		<unlock-message-modal
		  v-if="showUnlockBottleModal"
		  :visible="showUnlockBottleModal"
		  :scene-id="'bottle'"
		  @close="showUnlockBottleModal = false"
		  @show-vip="isVipModalVisible = true"
		  @unlock-success="onBottleUnlockSuccess"
		></unlock-message-modal>
	  </view>
  </layout>
</template>

<script>
import {
  getUserPage,
  getUserById,
  getUserWechat,
  updateUserProfile,
  createUserLike, // 新增导入
  checkUserMatch,  // 新增导入
  sayHello // 导入打招呼接口
} from '@/api/user/index.js';
import { mapGetters, mapActions } from 'vuex';
import FilterPopup from '@/components/common/FilterPopup.vue';
import ProfileGuide from '@/components/ProfileGuide.vue';
import DriftingBottles from '@/components/bottles/DriftingBottles.vue';
import VipPopup from '@/components/vip/vip-popup.vue';
import SubscribeManager, { STORAGE_KEYS } from '@/utils/subscribe-manager.js'; // 导入订阅管理工具类
import { geocoder } from '@/utils/mapUtils.js';
import UnlockMessageModal from '@/components/message/UnlockMessageModal.vue'; // 修正导入路径

export default {
  components: {
    FilterPopup,
	ProfileGuide,
	DriftingBottles,
	VipPopup,
	UnlockMessageModal
  },
  data() {
    return {
      users: [], // 用户数据列表
      visibleCount: 3, // 最多同时显示的卡片数量
      currentAnimation: '', // 当前的动画类名
      showHeartAnimation: false, // 是否显示心形动画
      showCrossAnimation: false, // 是否显示叉号动画
      touchStartX: 0, // 触摸开始的X坐标
      touchStartY: 0, // 触摸开始的Y坐标
      offsetX: 0, // X轴偏移量
      offsetY: 0, // Y轴偏移量
      isSwiping: false, // 是否正在滑动
      swipeThreshold: 80, // 滑动判定阈值
      swipeOpacity: 1, // 卡片透明度
      currentDirection: '', // 当前滑动方向提示
      isLoading: true, // 数据加载状态
      isLoadingMore: false, // 加载更多状态
      _presetSwipeDirection: null, // 微信小程序环境下预设的滑动方向
      isIOS: false, // 是否是iOS设备

      // 添加倒计时相关数据
      nextRecommendTime: null, // 下次推荐时间
      nextRecommendTimeFormatted: '00:00:00', // 格式化的倒计时时间
      countdownTimer: null, // 倒计时定时器

      // 添加分享相关数据
      shareConfig: {
        user: null,
        title: '',
        path: '',
        imageUrl: ''
      },

      // 分享文案数组
      shareTexts: [
        "遇见TA，是我今天最大的惊喜！",
        "来看看谁在等你的认识？",
        "这一刻，只差你的心动~",
        "来瞧瞧这位高颜值玩家",
        "这位大神正在寻找游戏搭子！",
        "我觉得TA和你超级合拍！",
        "看我发现了谁？快来认识一下！",
        "电竞圈的小可爱，求认识~",
        "游戏开黑，不来一个？",
        "最佳双排CP候选，请查收！",
        "深夜约你开黑，要不要来？",
        "TA的游戏技术一级棒，还不快认识？",
        "优质电竞玩家，保证你喜欢！",
        "做我的游戏搭子，好吗？",
        "缺一个默契的队友，就是TA了！",
        "因为游戏，所以相遇",
        "聊游戏，谈人生，一起？",
        "高能玩家预警，速来围观！",
        "可以一起开黑的小姐姐/小哥哥！",
        "双排上分，不来一个？",
        "如果游戏能让我们相遇，那一定很美妙",
        "游戏中的灵魂伴侣，等你认识",
        "超甜的游戏玩家，现正在线！",
        "游戏高手在民间，不来认识一下？",
        "Ta的游戏天赋惊人，快来围观！",
        "这个ID，我已经记住了！",
        "游戏邦交友，一生之敌变知己",
        "一起上分的日子，想想就开心",
        "游戏赢了没意思，认识TA才有趣",
        "听说，游戏玩得好的人都很温柔",
        "排位缺个队友，是缘分吧？",
        "一起开黑一起笑，认识Ta没烦恼",
        "游戏技术一般，但人超好！",
        "玩得菜，但很真诚地想认识你",
        "据说10个玩家9个单身，巧了吗？",
        "游戏和TA，你选哪个？我全都要！",
        "匹配的机制，就是要遇见对的人",
        "超甜的语音，超强的技术，了解一下？",
        "五杀不如认识你，在线等回复！",
        "要不要来一把，输了的那个请客？",
        "游戏嘛，不必太认真，认真的是遇见你",
        "打游戏，交朋友，双赢！",
        "你玩什么位置？我可以辅助你~",
        "路过你的游戏名片，忍不住想认识",
        "超想和你双排，认识一下？",
        "即刻相遇，开黑加微信走起！",
        "来一把王者，输了的那个请客？",
        "我的游戏好友位还缺一个你",
        "游戏玩家结缘，一起上分",
        "这里有一位大神/萌妹，等你康康！"
      ],

      // 匹配相关
      showMatchPopup: false,
      matchedUser: null,

      // 筛选相关
      showFilterModal: false,
      // 筛选选项 - 使用FilterPopup组件格式
      filterOptions: {
        ageRange: [18, 30],
        gender: 'all',
        distance: 0,
        onlineOnly: false,
        verifiedOnly: false,
        withInterestsOnly: false,
        vipOnly: false,
        selectedInterests: [],
        selectedTagIds: []
      },

      // 添加用户位置信息
      userLocation: {
        longitude: null,
        latitude: null
      },

      // 添加分页相关参数
      pageNo: 1,
      pageSize: 10,
      hasMore: true, // 是否有更多数据

      // 是否使用真实数据（默认启用）
      useRealData: true,

      // 静态用户数据（保留作为备用）
      mockUsers: [
        // 保留原有模拟数据
        {
          id: 1,
          name: '小雨',
          age: 24,
          gender: 'female',
          vip: true,
          verified: true,
          location: '上海市',
          distance: '3.5km',
          avatar: 'https://picsum.photos/seed/user1/500/700',
          photoCount: 5,
          photos: [
            'https://picsum.photos/seed/user1/500/700',
            'https://picsum.photos/seed/user1p2/500/700',
            'https://picsum.photos/seed/user1p3/500/700',
            'https://picsum.photos/seed/user1p4/500/700',
            'https://picsum.photos/seed/user1p5/500/700'
          ],
          tags: ['王者荣耀', '吃鸡', '看剧'],
          intro: '喜欢打游戏的小姐姐，擅长射手和法师，想找个一起双排的小哥哥~',
          canAddWechat: true
        },
        // ... 其他模拟用户数据保持不变
      ],

      // 筛选选项
      gameOptions: ['王者荣耀', '英雄联盟', 'DOTA2', 'CS2', '守望先锋', '吃鸡', 'Apex英雄', '云顶之弈', '炉石传说'],
      distanceOptions: [
        { label: '5公里', value: 5 },
        { label: '10公里', value: 10 },
        { label: '20公里', value: 20 },
        { label: '50公里', value: 50 },
        { label: '不限', value: 999 }
      ],
      showMoreOptions: false, // 控制更多选项的显示

	  // 漂流瓶相关 - 仅保留配置项
	  maxBottles: 4, // 最大显示漂流瓶数量
	  bottleSize: 50, // 漂流瓶大小（rpx转px）
	  showBackToTop: false,

	  // 添加VIP弹窗控制变量
	  isVipModalVisible: false,
	  showUnlockWechatModal: false, // 解锁微信弹窗控制变量
	  showUnlockBottleModal: false, // 解锁漂流瓶弹窗控制变量
    };
  },
  computed: {
    // 当前可见的用户列表
    visibleUsers() {
      if (!this.users || !this.users.length) {
        return [];
      }
      return this.users.slice(0, this.visibleCount);
    },
    // 顶层用户
    topUser() {
      return this.users.length > 0 ? this.users[0] : null;
    },
    // 底层用户列表
    backUsers() {
      return this.users.slice(1, this.visibleCount);
    },
    // 剩余添加微信次数
    remainAddWeixinCount() {
      // 直接使用已有的userInfo计算属性
      return this.userInfo ? (this.userInfo.remainAddWeixinCount || 0) : 0;
    },
    // 剩余扔漂流瓶次数
    remainBottleCount() {
      // 直接使用已有的userInfo计算属性
      return this.userInfo ? (this.userInfo.remainBottleCount || 0) : 0;
    },
    // 添加计算属性获取当前用户头像
    currentUserAvatar() {
      // 从store获取用户信息
      const userInfo = this.$store.state.user.userInfo;
      // 如果用户已登录且有头像，则使用其头像，否则返回空字符串
      return userInfo && userInfo.avatar ? userInfo.avatar : '';
    },
    // 顶层卡片样式
    topCardStyle() {
      if (!this.topUser) return {};

      let style = {
        zIndex: 999
      };

      // #ifdef MP-WEIXIN
      // 微信小程序环境下的特殊处理
      if (this.isSwiping) {
        // 限制旋转角度
        let rotateAngle = Math.max(Math.min(this.offsetX * 0.1, 15), -15);

        style.transform = `translateX(${this.offsetX}px) translateY(${this.offsetY}px) rotate(${rotateAngle}deg)`;

        // 根据滑动方向添加边框色
        if (this.currentDirection === 'like') {
          const opacity = Math.min(1, Math.abs(this.offsetX) / 300).toFixed(2);
          style.boxShadow = `0 0 20rpx rgba(179, 247, 60, ${opacity})`;
          style.border = `2rpx solid rgba(179, 247, 60, ${opacity})`;
        } else if (this.currentDirection === 'skip') {
          const opacity = Math.min(1, Math.abs(this.offsetX) / 300).toFixed(2);
          style.boxShadow = `0 0 20rpx rgba(247, 83, 83, ${opacity})`;
          style.border = `2rpx solid rgba(247, 83, 83, ${opacity})`;
        }
      } else {
        style.transform = 'translateX(0) translateY(0) rotate(0)';
      }
      // #endif

      // #ifndef MP-WEIXIN
      // 非微信小程序环境保持原有逻辑
      if (this.isSwiping) {
        // 当前滑动的卡片，根据滑动方向添加不同的样式
        let rotateAngle = this.offsetX * 0.1;
        // 限制最大旋转角度
        rotateAngle = Math.max(Math.min(rotateAngle, 15), -15);

        // 基本变换样式
        style.transform = `translateX(${this.offsetX}px) translateY(${this.offsetY}px) rotate(${rotateAngle}deg)`;

        // 根据滑动方向添加不同的边框色
        if (this.currentDirection === 'like') {
          const opacity = Math.min(1, Math.abs(this.offsetX) / 300).toFixed(2);
          style.boxShadow = `0 0 20rpx rgba(179, 247, 60, ${opacity})`;
          style.border = `2rpx solid rgba(179, 247, 60, ${opacity})`;
        } else if (this.currentDirection === 'skip') {
          const opacity = Math.min(1, Math.abs(this.offsetX) / 300).toFixed(2);
          style.boxShadow = `0 0 20rpx rgba(247, 83, 83, ${opacity})`;
          style.border = `2rpx solid rgba(247, 83, 83, ${opacity})`;
        }
      } else {
        // 默认状态
        style.transform = 'translateX(0) translateY(0) rotate(0)';
      }
      // #endif

      return style;
    },
    // 底层卡片样式
    backCardStyles() {
      const styles = [];

      if (this.backUsers && this.backUsers.length > 0) {
        for (let i = 0; i < this.backUsers.length; i++) {
          // 实际索引（在整个用户列表中的索引）
          const realIndex = i + 1;

          let scale, translateY, opacity, zIndex;

          // #ifdef MP-WEIXIN
          // 微信小程序环境下使用固定的基于索引的样式，避免因计算问题导致卡片错位
          scale = (0.95 - i * 0.05).toFixed(2); // 从0.95开始递减，确保缩放比例更一致
          translateY = i * 12; // 微调位移值，使层叠更明显
          opacity = (0.9 - i * 0.15).toFixed(2); // 调整透明度衰减速度
          zIndex = 900 - i; // 保证z轴顺序正确排列，从900开始递减
          // #endif

          // #ifndef MP-WEIXIN
          // 非微信小程序环境保持原有计算方式
          scale = (1 - realIndex * 0.05).toFixed(2);
          translateY = realIndex * 10;
          opacity = (1 - realIndex * 0.2).toFixed(2);
          zIndex = this.users.length - realIndex;
          // #endif

          styles.push({
            zIndex: zIndex,
            transform: `translateX(0) translateY(${translateY}px) scale(${scale})`,
            opacity: opacity
          });
        }
      }

      return styles;
    },
    // 保留原来的cardStyles计算属性以防需要
    cardStyles() {
      const styles = [];

      if(this.visibleUsers && this.visibleUsers.length > 0) {
        for(let i = 0; i < this.visibleUsers.length; i++) {
          let style = {};

          if (i === 0 && this.isSwiping) {
            // 当前滑动的卡片，根据滑动方向添加不同的样式
            let rotateAngle = this.offsetX * 0.1;
            // 限制最大旋转角度
            rotateAngle = Math.max(Math.min(rotateAngle, 15), -15);

            // 基本变换样式
            style = {
              zIndex: this.users.length,
              transform: `translateX(${this.offsetX}px) translateY(${this.offsetY}px) rotate(${rotateAngle}deg)`
            };

            // 根据滑动方向添加不同的边框色
            if (this.currentDirection === 'like') {
              const opacity = Math.min(1, Math.abs(this.offsetX) / 300).toFixed(2);
              style.boxShadow = `0 0 20rpx rgba(179, 247, 60, ${opacity})`;
              style.border = `2rpx solid rgba(179, 247, 60, ${opacity})`;
            } else if (this.currentDirection === 'skip') {
              const opacity = Math.min(1, Math.abs(this.offsetX) / 300).toFixed(2);
              style.boxShadow = `0 0 20rpx rgba(247, 83, 83, ${opacity})`;
              style.border = `2rpx solid rgba(247, 83, 83, ${opacity})`;
            }
          } else if (i === 0) {
            // 最顶层卡片
            style = {
              zIndex: this.users.length,
              transform: 'translateX(0) translateY(0) rotate(0)'
            };
          } else {
            // 下面的卡片，越往下偏移越大，添加不同的缩放和透明度
            const scale = (1 - i * 0.05).toFixed(2);
            const translateY = i * 10;
            const opacity = (1 - i * 0.2).toFixed(2);
            const zIndex = this.users.length - i;

            style = {
              zIndex: zIndex,
              transform: `translateX(0) translateY(${translateY}px) scale(${scale})`,
              opacity: opacity
            };
          }

          styles.push(style);
        }
      }

      return styles;
    },
	// 从config模块获取wxAuditMode
	...mapGetters('config', ['wxAuditMode']),

    // 添加userInfo计算属性，用于传递给VIP弹窗组件
    userInfo() {
      const userState = this.$store.state.user || {};
      const userInfo = userState.userInfo || {};
      return {
        isVip: userInfo.vip === true,
        // 传递原始用户信息和必要的附加属性
        ...userInfo
      };
    },
  },
  onLoad() {
    // 获取用户位置
    this.getUserLocation();

    // 确保用户信息已加载
    if (!this.$store.state.user.userInfo) {
      this.$store.dispatch('user/getUserInfo').catch(error => {
        console.error('获取用户信息失败:', error);
      });
    }

    // 初始化数据
    this.initData();

    // 检查是否从分享链接进入
    this.checkAndLoadUserFromShare();
  },
  onShow() {
    // 重新加载系统配置
    this.fetchSystemConfig().then(() => {
      console.log('交友页面重新加载系统配置成功');
    }).catch(error => {
      console.error('交友页面重新加载系统配置失败:', error);
    });

	if(!this.wxAuditMode) {
	  this.refreshBottles();

    // #ifdef MP-WEIXIN
    // 使用SubscribeManager检查从设置页面返回状态
    SubscribeManager.checkFromSettingReturn(
        // 成功回调 - 用户已授权并接受订阅
        (result) => {
          // 发送漂流瓶的逻辑
          this.$refs.bottlesComponent.sendBottle();
        },
        // 失败回调 - 用户未授权或拒绝订阅
        () => {
          // 如果仍未订阅，继续提示
          this.continueSubscribeGuide();
        },
        // 传递必要的参数
        'POST_ALL',
        STORAGE_KEYS.POST.SUBSCRIBED,
        STORAGE_KEYS.POST.SUBSCRIBE_TIME,
        STORAGE_KEYS.POST.LAST_PROMPT
    );
    // #endif
	}

	// 页面显示时初始化倒计时
	this.initCountdown();
  },
  // 添加微信小程序分享方法
  // #ifdef MP-WEIXIN
  onShareAppMessage(res) {
    // 如果是从按钮触发的分享
    if (res.from === 'button') {
      // 返回shareConfig中设置的分享信息
      return {
        title: this.shareConfig.title,
        path: this.shareConfig.path,
        imageUrl: this.shareConfig.imageUrl
      };
    }

    // 默认分享，如果右上角菜单触发
    return {
      title: "电竞社交，一起来认识有趣的游戏玩家！",
      path: '/pages/friends/index',
      imageUrl: '' // 使用默认小程序截图
    };
  },

  // 分享到朋友圈
  onShareTimeline() {
    // 如果有当前分享的用户，使用其内容
    if (this.shareConfig.user) {
      return {
        title: this.shareConfig.title,
        query: `userId=${this.shareConfig.user.id}`,
        imageUrl: this.shareConfig.imageUrl
      };
    }

    // 否则使用默认分享文案
    return {
      title: "电竞社交，一起来认识有趣的游戏玩家！",
      query: '',
      imageUrl: '' // 使用默认小程序截图
    };
  },
  // #endif
  methods: {
	// 添加config模块的fetchSystemConfig方法映射
	...mapActions('config', ['fetchSystemConfig']),
    // 触摸开始事件
    touchStart(e) {
      if (this.users.length === 0) return;

      this.touchStartX = e.touches[0].clientX;
      this.touchStartY = e.touches[0].clientY;
      this.isSwiping = true;
    },

    // 触摸移动事件
    touchMove(e) {
      if (!this.isSwiping) return;

      const touchX = e.touches[0].clientX;
      const touchY = e.touches[0].clientY;

      // 添加阻尼效果，随着拖动距离增加，移动速度变慢
      const deltaX = touchX - this.touchStartX;
      const deltaY = touchY - this.touchStartY;

      // 阻尼系数
      const dampFactor = 0.8;

      this.offsetX = deltaX * dampFactor;
      this.offsetY = deltaY * dampFactor;

      // 根据滑动方向显示操作提示
      if (this.offsetX > this.swipeThreshold * 0.6) {
        this.currentDirection = 'like';
        // 随着向右滑动增加绿色透明度
        this.swipeOpacity = Math.min(1, 0.7 + Math.abs(this.offsetX) / 300);
      } else if (this.offsetX < -this.swipeThreshold * 0.6) {
        this.currentDirection = 'skip';
        // 随着向左滑动增加红色透明度
        this.swipeOpacity = Math.min(1, 0.7 + Math.abs(this.offsetX) / 300);
      } else {
        this.currentDirection = '';
        this.swipeOpacity = 1;
      }

      // #ifdef MP-WEIXIN
      // 微信小程序环境下，提前计算方向以便更快响应
      if (Math.abs(deltaX) > Math.abs(deltaY) * 2 && Math.abs(deltaX) > 30) {
        // 水平方向滑动明显时预设动画方向，提高响应速度
        this._presetSwipeDirection = deltaX > 0 ? 'like' : 'skip';
      } else {
        this._presetSwipeDirection = null;
      }
      // #endif
    },

    // 触摸结束事件
    touchEnd() {
      if (!this.isSwiping) return;

      // #ifdef MP-WEIXIN
      // 微信小程序环境特殊处理
      if (this._presetSwipeDirection === 'like' && this.offsetX > this.swipeThreshold * 0.8) {
        // 预设方向为喜欢且达到阈值
        this.likeUser();
      } else if (this._presetSwipeDirection === 'skip' && this.offsetX < -this.swipeThreshold * 0.8) {
        // 预设方向为跳过且达到阈值
        this.skipUser();
      } else if (this.offsetX > this.swipeThreshold) {
        // 正常判断 - 向右滑动 - 喜欢
        this.likeUser();
      } else if (this.offsetX < -this.swipeThreshold) {
        // 正常判断 - 向左滑动 - 跳过
        this.skipUser();
      } else {
        // 恢复原位 - 立即重置而不使用动画
        this.offsetX = 0;
        this.offsetY = 0;
        this.currentDirection = '';
        this.swipeOpacity = 1;
      }
      this._presetSwipeDirection = null;
      // #endif

      // #ifndef MP-WEIXIN
      // 非微信小程序环境保持原逻辑
      // 判断滑动方向和距离
      if (this.offsetX > this.swipeThreshold) {
        // 向右滑动 - 喜欢
        this.likeUser();
      } else if (this.offsetX < -this.swipeThreshold) {
        // 向左滑动 - 跳过
        this.skipUser();
      } else {
        // 恢复原位 - 添加弹回动画
        this.currentAnimation = 'animate__bounceBack';
        setTimeout(() => {
          this.currentAnimation = '';
          this.offsetX = 0;
          this.offsetY = 0;
          this.currentDirection = '';
          this.swipeOpacity = 1;
        }, 300);
      }
      // #endif

      this.isSwiping = false;
    },

    // 应用筛选
    applyFilters(filterOptions) {

	  if(!this.userInfo.isVip){
		  uni.showModal({
			title: '会员特权',
			content: '附近筛选功能只对会员开放，请开通会员',
			showCancel: false,
			success: (res) => {
			  if (res.confirm) {
				// 显示VIP弹窗
				this.isVipModalVisible = true;
			  }
			}
		  });
		  return;
	  }


      // 更新筛选选项
      this.filterOptions = filterOptions;

      // 重置页码并重新加载用户
      this.pageNo = 1;
      this.users = [];
      this.hasMore = true;
      this.isLoading = true;

      // 加载新的用户数据
      this.loadUserData().then(result => {
        /* if (result.list.length === 0) {
          this.$refs.toast.show({
            title: '没有匹配结果',
            content: '尝试调整筛选条件',
            icon: 'info'
          });
        } else {
          this.$refs.toast.show({
            title: '筛选成功',
            content: `找到${result.list.length}个匹配的用户`,
            icon: 'check'
          });
        } */
      });
    },

    // 喜欢当前用户
    likeUser() {
      if (this.users.length === 0) return;

	  // 添加震动反馈
	  uni.vibrateShort({
	    success: function () {
	      console.log('震动成功');
	    }
	  });

      // 设置向右滑出的动画
      this.currentAnimation = 'animate__slideOutRight';

      // 显示心形动画
      this.showHeartAnimation = true;
      setTimeout(() => {
        this.showHeartAnimation = false;
      }, 1000);

      // 当前用户对象 - 创建深拷贝避免引用问题
      const currentUser = JSON.parse(JSON.stringify(this.users[0]));

      // 单独调用打招呼接口
      sayHello({
        receiverId: currentUser.id,
        receiverType: 1 // 1-会员用户类型
      }).then(res => {
        console.log('打招呼消息已发送', res);
      }).catch(err => {
        console.error('发送打招呼消息失败:', err);
      });

      // 记录喜欢操作到后端
      createUserLike({
        targetUserId: currentUser.id,
        isLike: true,
        source: 1 // 1-交友页面
      }).then(response => {
        console.log('喜欢操作已记录', response);
        // 检查是否匹配成功
        return checkUserMatch(currentUser.id);
      }).then(response => {
        // 如果匹配成功，显示匹配界面
        if (response && response.isMatch && currentUser) {
          this.showMatchSuccess(currentUser);
        } else {
          // 模拟匹配成功（概率设置为100%）
          if (true && currentUser) {
            this.showMatchSuccess(currentUser);
          }
        }
      }).catch(error => {
        console.error('记录喜欢操作失败:', error);
      });

      // 为不同平台分别处理
      // #ifdef MP-WEIXIN
      // 微信小程序环境下，立即更新数据，避免渲染延迟
      this.users.shift();
      this.currentAnimation = '';
      this.offsetX = 0;
      this.offsetY = 0;
      this.currentDirection = '';
      this.swipeOpacity = 1;

      // 检查是否需要加载更多用户
      this.checkLoadMore();

      // 检查用户列表是否为空，如果为空则刷新用户列表
      if (this.users.length === 0) {
        this.refreshUsers();
      }
      // #endif

      // #ifndef MP-WEIXIN
      // 非微信小程序环境，保持原有逻辑
      setTimeout(() => {
        this.users.shift();
        this.currentAnimation = '';
        this.offsetX = 0;
        this.offsetY = 0;
        this.currentDirection = '';
        this.swipeOpacity = 1;

        // 检查是否需要加载更多用户
        this.checkLoadMore();

        // 检查用户列表是否为空，如果为空则刷新用户列表
        if (this.users.length === 0) {
          this.refreshUsers();
        }
      }, 500);
      // #endif
    },

    // 跳过当前用户
    skipUser() {
      if (this.users.length === 0) return;

	  // 添加震动反馈
	  uni.vibrateShort({
	    success: function () {
	      console.log('震动成功');
	    }
	  });

      // 设置向左滑出的动画
      this.currentAnimation = 'animate__slideOutLeft';

      // 显示叉号动画
      this.showCrossAnimation = true;
      setTimeout(() => {
        this.showCrossAnimation = false;
      }, 1000);

      // 当前用户对象 - 创建深拷贝避免引用问题
      const currentUser = JSON.parse(JSON.stringify(this.users[0]));

      // 记录不喜欢操作到后端
      createUserLike({
        targetUserId: currentUser.id,
        isLike: false,
        source: 1 // 1-交友页面
      }).catch(error => {
        console.error('记录跳过操作失败:', error);
      });

      // 为不同平台分别处理
      // #ifdef MP-WEIXIN
      // 微信小程序环境下，立即更新数据，避免渲染延迟
      this.users.shift();
      this.currentAnimation = '';
      this.offsetX = 0;
      this.offsetY = 0;
      this.currentDirection = '';
      this.swipeOpacity = 1;

      // 检查是否需要加载更多用户
      this.checkLoadMore();

      // 检查用户列表是否为空，如果为空则刷新用户列表
      if (this.users.length === 0) {
        this.refreshUsers();
      }
      // #endif

      // #ifndef MP-WEIXIN
      // 非微信小程序环境，保持原有逻辑
      setTimeout(() => {
        this.users.shift();
        this.currentAnimation = '';
        this.offsetX = 0;
        this.offsetY = 0;
        this.currentDirection = '';
        this.swipeOpacity = 1;

        // 检查是否需要加载更多用户
        this.checkLoadMore();

        // 检查用户列表是否为空，如果为空则刷新用户列表
        if (this.users.length === 0) {
          this.refreshUsers();
        }
      }, 500);
      // #endif
    },

    // 检查是否需要加载更多用户
    checkLoadMore() {
      // 如果用户数量低于阈值，加载更多
      if (this.users.length < this.visibleCount && this.hasMore) {
        this.pageNo++; // 增加页码
        this.loadUserData(); // 加载更多数据
      }
    },

    // 刷新用户列表
    refreshUsers() {
      // 重置页码
      this.pageNo = 1;
      this.hasMore = true;

      // 重新加载数据
      this.loadUserData();
    },

    // 添加继续引导订阅的方法
    continueSubscribeGuide() {
      SubscribeManager.showSubscribeGuide((subscribed) => {
        // 如果仍未订阅，onShow会再次触发处理
      });
    },

    // 发送私信
    messageUser() {
      if (this.users.length === 0) return;

      // 当前用户
      const currentUser = this.users[0];

      // 先记录为喜欢，但不处理匹配逻辑
      createUserLike({
        targetUserId: currentUser.id,
        isLike: true,
        source: 1 // 1-交友页面
      }).catch(error => {
        console.error('记录喜欢操作失败:', error);
        // 即使记录失败也继续后续流程，不影响用户体验
      });

      // 在跳转前先检查资料完整度
      const isProfileComplete = this.$store.dispatch('user/forceCheckProfileCompleteness');

      // 使用Promise处理异步dispatch结果
      isProfileComplete.then(complete => {
        if (complete) {
		  if(!this.userInfo.isVip){
			  uni.showModal({
				title: '会员特权',
				content: '私信功能只对会员开放，请开通会员',
				showCancel: false,
				success: (res) => {
				  if (res.confirm) {
					// 显示VIP弹窗
					this.isVipModalVisible = true;
				  }
				}
			  });
			  return;
		  }

          // 资料已完整，直接跳转到聊天页面
          uni.navigateTo({
            url: `/pages/chat/index?id=${currentUser.id}`
          });

		  this.showMoreOptions = false;
        } else {
          // 资料不完整，不执行跳转，会自动显示引导弹窗
          console.log('资料不完整，需要先完善资料');
        }
      });
    },

    // 显示匹配成功弹窗
    showMatchSuccess(matchedUser) {
      if (!matchedUser) {
        console.error('匹配用户数据为空');
        return;
      }

      this.matchedUser = {...matchedUser}; // 使用数据副本避免引用问题
      this.showMatchPopup = true;

      // 播放匹配成功音效（如果需要）
      // this.playMatchSound();
    },

    // 关闭匹配弹窗
    closeMatchPopup() {
      this.showMatchPopup = false;
      this.matchedUser = null;
    },

    // 跳转到聊天页面
    goToChat() {
      if (!this.matchedUser) return;

	  // 在跳转前先检查资料完整度
	  const isProfileComplete = this.$store.dispatch('user/forceCheckProfileCompleteness');

	  // 使用Promise处理异步dispatch结果
	  isProfileComplete.then(complete => {
	    if (complete) {
	      // 资料已完整，直接跳转到聊天页面
	      uni.navigateTo({
	        url: `/pages/chat/index?id=${this.matchedUser.id}`
	      });

		  this.closeMatchPopup();
	    } else {
	      // 资料不完整，不执行跳转，会自动显示引导弹窗
	      console.log('资料不完整，需要先完善资料');
	    }
	  });
    },

    // 初始化数据
    initData() {
      this.isLoading = true;

      // 加载用户数据
      this.loadUserData();
    },

    // 加载用户数据
    loadUserData() {
      if (this.pageNo === 1) {
        this.isLoading = true;
        this.isLoadingMore = false;
      } else {
        this.isLoadingMore = true;
      }

      if (this.useRealData) {
        // 构建查询参数
        const params = this.buildQueryParams();

        // 调用API
        return getUserPage(params).then(response => {
          const { total, list } = response;

          // 处理用户数据
          const processedUsers = this.processUserData(list || []);

          // 更新用户列表
          if (this.pageNo === 1) {
            this.users = processedUsers;
          } else {
            this.users = [...this.users, ...processedUsers];
          }

          // 检查是否还有更多数据
          this.hasMore = list && list.length >= this.pageSize;

          this.isLoading = false;
          this.isLoadingMore = false;

          return { total, list: processedUsers };
        }).catch(error => {
          console.error('获取用户列表失败:', error);
          this.isLoading = false;
          this.isLoadingMore = false;

          // 显示错误提示
          uni.showToast({
            title: '加载失败，请稍后再试',
            icon: 'none'
          });

          // 如果网络错误且是首次加载，可以使用模拟数据作为降级处理
          if (this.pageNo === 1 && (!this.users || this.users.length === 0)) {
            this.users = [...this.mockUsers];
          }

          return { total: 0, list: [] };
        });
      } else {
        // 使用模拟数据（保留以便测试）
        return new Promise(resolve => {
          setTimeout(() => {
            if (this.pageNo === 1) {
              this.users = [...this.mockUsers];
            } else {
              // 模拟分页加载更多
              const moreUsers = this.mockUsers.map(user => ({
                ...user,
                id: user.id + this.pageNo * 10
              }));
              this.users = [...this.users, ...moreUsers];
            }

            this.isLoading = false;
            this.isLoadingMore = false;

            // 模拟只有5页数据
            this.hasMore = this.pageNo < 5;

            resolve({ total: 50, list: this.users });
          }, 800);
        });
      }
    },

    // 构建查询参数
    buildQueryParams() {
      // 基础参数
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        currentUserId: uni.getStorageSync('userId') || ''
      };

      // 添加筛选条件
      if (this.filterOptions.gender !== 'all') {
        params.sex = this.filterOptions.gender === 'male' ? 1 : 2;
      }

      if (this.filterOptions.vipOnly) {
        params.vip = true;
      }

      // 添加位置信息
      if (this.userLocation.latitude && this.userLocation.longitude) {
        params.latitude = this.userLocation.latitude;
        params.longitude = this.userLocation.longitude;

        // 如果设置了最大距离且不是"不限"
        if (this.filterOptions.distance > 0) {
          params.distance = this.filterOptions.distance * 1000; // 转换为米
          params.sortByDistance = true;
        }
      }

      // 添加标签筛选
      if (this.filterOptions.selectedInterests.length > 0) {
        // 使用标签ID作为查询参数
        params.tagIds = this.filterOptions.selectedTagIds;
      }

      return params;
    },

    // 显示筛选选项
    showFilterOptions() {
      // 显示筛选模态框
      this.showFilterModal = true;
    },

    // 关闭筛选模态框
    closeFilterModal() {
      this.showFilterModal = false;
    },

    // 切换游戏选择
    toggleGameSelection(game) {
      const index = this.filterOptions.selectedInterests.indexOf(game);
      if (index === -1) {
        // 添加游戏
        this.filterOptions.selectedInterests.push(game);
      } else {
        // 移除游戏
        this.filterOptions.selectedInterests.splice(index, 1);
      }
    },

    // 年龄范围改变
    ageRangeChange(e) {
      this.filterOptions.ageRange = e;
    },

    // 重置筛选
    resetFilters() {
      // 已由FilterPopup组件内部处理重置逻辑，此处无需额外操作
      console.log('筛选条件已重置');
    },

    // 发送漂流瓶
    sendBottle() {
      // 关闭更多选项菜单
      this.showMoreOptions = false;

      // 发送漂流瓶的逻辑
      this.$refs.bottlesComponent.openThrowBottleModal();
    },

    openVip() {
      // 显示VIP弹窗
      this.isVipModalVisible = true;
    },

    // 处理API返回的用户数据
    processUserData(userList) {
      if (!Array.isArray(userList)) return [];

      return userList.map(user => {
        // 处理图片数组
        const photos = user.albums && user.albums.length > 0
          ? user.albums.map(album => album.imageUrl)
          : [];

        // 处理标签数组
        const tags = user.interestTags && user.interestTags.length > 0
          ? user.interestTags.map(tag => tag.name)
          : [];

        // 处理距离
        const distanceKm = user.distance ? (user.distance / 1000).toFixed(1) + 'km' : '未知';

        // 确保id是字符串类型
        const userId = user.id !== undefined ? String(user.id) : '';

        return {
          id: userId,
          name: user.nickname || `用户${userId.substring(0, 6)}`,
          age: user.age || 18,
          gender: user.sex === 1 ? 'male' : 'female',
          vip: user.vip === true,
          verified: user.realNameStatus === 1,
          location: user.city || user.loginIpLocation || user.registerIpLocation || '未知',
          distance: distanceKm,
          // 不设置avatar的默认值，如果没有头像则保持为空
          avatar: user.avatar || '',
          photoCount: photos.length,
          // 不使用avatar作为photos的备选，保持photos为原样
          photos: photos,
          tags: tags,
          intro: user.signature || '这个人很懒，什么都没留下',
          canAddWechat: user.canAddWechat === true
        };
      });
    },

    // 获取用户位置
    getUserLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.userLocation.longitude = res.longitude;
          this.userLocation.latitude = res.latitude;
          console.log('获取位置成功:', res);

          // 使用地图工具函数进行地理编码解析（将经纬度转换为地址信息）
          geocoder(res.latitude, res.longitude)
            .then(result => {
              const addressComponent = result.address_component;
              console.log('解析到的地址信息:', addressComponent);

              if (addressComponent && addressComponent.city) {
                // 更新用户位置和城市信息到后端
                updateUserProfile({
                  longitude: res.longitude,
                  latitude: res.latitude,
                  city: addressComponent.city
                }).then(() => {
                  console.log('位置信息已更新到后端');
                }).catch(error => {
                  console.error('位置信息更新失败:', error);
                });
              } else {
                // 如果没有解析出城市，则只更新经纬度
                updateUserProfile({
                  longitude: res.longitude,
                  latitude: res.latitude
                }).catch(error => {
                  console.error('位置信息更新失败:', error);
                });
              }
            })
            .catch(error => {
              console.error('地址解析失败:', error);
              // 地址解析失败，仍然更新经纬度
              updateUserProfile({
                longitude: res.longitude,
                latitude: res.latitude
              }).catch(error => {
                console.error('位置信息更新失败:', error);
              });
            });
        },
        fail: (err) => {
          console.error('获取位置失败:', err);
        }
      });
    },

    // 添加微信
    addWechat() {
	  const currentUser = this.users[0];
	  // 先记录为喜欢，但不处理匹配逻辑
	  createUserLike({
	    targetUserId: currentUser.id,
	    isLike: true,
	    source: 1 // 1-交友页面
	  }).catch(error => {
	    console.error('记录喜欢操作失败:', error);
	    // 即使记录失败也继续后续流程，不影响用户体验
	  });

	  // 在跳转前先检查资料完整度
	  const isProfileComplete = this.$store.dispatch('user/forceCheckProfileCompleteness');

	  // 使用Promise处理异步dispatch结果
	  isProfileComplete.then(complete => {
	    if (complete) {
	      if (this.users.length === 0) return;

	      // 先弹出确认对话框
	      uni.showModal({
	        title: '添加微信',
	        content: '是否添加对方微信？',
	        confirmText: '添加',
	        success: (res) => {
	          if (res.confirm) {
	            // 用户确认后，调用API获取微信号
	            this.fetchAndShowWechat(currentUser.id, currentUser.name);
	          }
	        }
	      });
	    } else {
	      // 资料不完整，不执行跳转，会自动显示引导弹窗
	      console.log('资料不完整，需要先完善资料');
	    }
	  });
    },

    // 获取并显示微信号
    fetchAndShowWechat(userId, username) {
      // 调用API获取微信号
      getUserWechat(userId).then(response => {
        const wechatId = response ? response : '';
        if(wechatId) {
          // 显示微信号弹窗
          this.showWechatModal(wechatId, username || '该用户');
		  // 通过Vuex刷新用户信息
		  this.$store.dispatch('user/getUserInfo');
        } else {
          uni.showToast({
            title: '获取微信号失败',
            icon: 'none'
          });
        }
      }).catch(error => {
        // 记录错误并显示获取失败提示
        console.error('获取微信号失败:', error);

		if(error.code === 1004001102){
      // 显示解锁弹窗，不再直接显示VIP弹窗
      // this.showUnlockWechatModal = true;
			// 不再显示解锁弹窗，直接显示会员提示
			uni.showModal({
				title: '会员特权',
				content: error.msg,
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						// 显示VIP弹窗
						this.isVipModalVisible = true;
					}
				}
			});
		}else if(error.code === 1004001105){
      uni.showToast({
        title: error.msg,
        icon: 'none',
        duration: 2000
      });
      // 申请成功后，自动切换到下一个用户
      this.skipUser();
    }else{
			uni.showToast({
			  title: error.msg,
			  icon: 'none',
			  duration: 2000
			});
		}
      });
    },

    // 显示微信号弹窗
    showWechatModal(wechatId, username) {
      uni.showModal({
        title: '微信号',
        content: `${username}的微信号：${wechatId}`,
        confirmText: '复制',
        cancelText: '关闭',
        success: (res) => {
          if (res.confirm) {
            // 复制微信号到剪贴板
            uni.setClipboardData({
              data: wechatId,
              success: () => {
                uni.showToast({
                  title: '微信号已复制',
                  icon: 'success'
                });

                // 复制微信号后，自动切换到下一个用户
                this.skipUser();
              }
            });
          } else {
            // 点击关闭按钮后，自动切换到下一个用户
            this.skipUser();
          }
        }
      });
    },

    // 切换更多选项的显示状态
    toggleMoreOptions() {
      this.showMoreOptions = !this.showMoreOptions;
      // 点击外部关闭菜单
      if (this.showMoreOptions) {
        setTimeout(() => {
          const clickHandler = () => {
            this.showMoreOptions = false;
            document.removeEventListener('click', clickHandler);
          };
          document.addEventListener('click', clickHandler);
        }, 100);
      }
    },

    // 预览用户照片
    previewUserPhotos(user) {
      // 如果正在滑动卡片，不触发预览
      if (this.isSwiping) return;

      // 如果用户没有照片，不处理
      if (!user.photos || user.photos.length === 0) {
        return;
      }

      // 调用uni.previewImage预览图片
      uni.previewImage({
        current: 0, // 从第一张开始预览
        urls: user.photos,
        success: () => {
          console.log('预览照片成功');
        },
        fail: (err) => {
          console.error('预览照片失败', err);
        }
      });
    },

    handleScrollToUpper(e) {
      console.log('滚动到顶部', e);
    },

    // 添加分享用户卡片方法
    shareUserCard(user) {
      if (!user) return;

      console.log(`准备分享用户卡片: ${user.id}`, user);

      // 阻止事件冒泡，防止点击分享按钮时触发卡片的其他点击事件
      this.$nextTick(() => {
        // 设置要分享的用户
        this.shareConfig.user = user;

        // 随机选择一条分享文案
        const randomIndex = Math.floor(Math.random() * this.shareTexts.length);
        let shareTitle = this.shareTexts[randomIndex];

        // 替换文案中的占位符，如果有用户名就替换，没有就用默认
        if (user.name) {
          // 替换文案中的TA、Ta等
          shareTitle = shareTitle.replace(/TA|Ta/g, user.name);
        }

        this.shareConfig.title = shareTitle;

        // 设置分享路径，携带用户ID参数
        this.shareConfig.path = `/pages/friends/index?userId=${user.id}`;

        // 设置分享图片：优先使用用户照片，其次是头像
        if (user.photos && user.photos.length > 0) {
          this.shareConfig.imageUrl = user.photos[0];
        } else if (user.avatar) {
          this.shareConfig.imageUrl = user.avatar;
        } else {
          // 不设置imageUrl，微信会使用默认的小程序截图
          this.shareConfig.imageUrl = '';
        }

        // 微信小程序环境下触发分享
        // #ifdef MP-WEIXIN
        // 微信小程序中，通过button的open-type="share"自动触发分享
        // 这里我们在DOM中已经添加了分享按钮，不需要额外处理
        // #endif

        // 非微信小程序环境下显示普通分享菜单
        // #ifndef MP-WEIXIN
        uni.showActionSheet({
          itemList: ['复制用户信息'],
          success: (res) => {
            if (res.tapIndex === 0) {
              const userInfo = `${user.name}，${user.age}岁，${user.gender === 'male' ? '男' : '女'}，${user.location}`;
              uni.setClipboardData({
                data: userInfo,
                success: () => {
                  uni.showToast({
                    title: '用户信息已复制',
                    icon: 'success'
                  });
                }
              });
            }
          }
        });
        // #endif
      });
    },

    // 检查传入的用户ID并加载对应用户
    checkAndLoadUserFromShare() {
      const query = uni.getLaunchOptionsSync().query;
      if (query && query.userId) {
        const userId = query.userId;
        console.log('从分享链接加载用户:', userId);

        // 调用API获取用户信息
        getUserById(userId).then(userData => {
          // 如果成功获取用户数据，将其加入到用户列表前面
          if (userData) {
            // 将API返回的用户数据转换为前端需要的格式
            const formattedUser = this.formatUserData(userData);

            // 添加到现有的用户列表最前面
            this.users.unshift(formattedUser);

            // 如果有必要，修剪列表保持在合理长度
            if (this.users.length > 20) {
              this.users = this.users.slice(0, 20);
            }

            // 显示提示
            uni.showToast({
              title: '已加载分享的用户卡片',
              icon: 'none'
            });
          }
        }).catch(err => {
          console.error('加载分享用户失败:', err);
        });
      }
    },

    // 引导用户开通会员
    promptVipUpgrade() {
      // 判断用户是否已经是会员
      const userInfo = this.$store.state.user.userInfo;
      const isVip = userInfo && userInfo.vip === true;

      if (isVip) {
        // 如果已经是会员，直接刷新推荐
		this.filterOptions = {
		  ageRange: [18, 30],
		  gender: 'all',
		  distance: 0,
		  onlineOnly: false,
		  verifiedOnly: false,
		  withInterestsOnly: false,
		  vipOnly: false,
		  selectedInterests: [],
		  selectedTagIds: []
		};
        this.refreshUsers();
      } else {
		  uni.showModal({
			title: '会员特权',
			content: '立即推荐功能只对会员开放，请开通会员',
			showCancel: false,
			success: (res) => {
			  if (res.confirm) {
				// 显示VIP弹窗
				this.isVipModalVisible = true;
			  }
			}
		  });
	  }
    },

    // VIP购买成功的回调
    onVipPurchaseSuccess(purchaseInfo) {
      console.log('VIP购买成功', purchaseInfo);
      // 刷新推荐列表
      // this.refreshUsers();
    },

    // 处理解锁微信成功事件
    onWechatUnlockSuccess() {
      console.log('解锁微信成功');

      // 解锁成功后，尝试获取当前用户的微信
      if (this.users && this.users.length > 0) {
        const currentUser = this.users[0];
        this.fetchAndShowWechat(currentUser.id, currentUser.name);
      } else {
        // 如果没有当前用户，也切换到下一个
        this.skipUser();
      }
    },

    // 处理解锁漂流瓶成功事件
    onBottleUnlockSuccess() {
      console.log('解锁漂流瓶成功');
      // 更新用户信息，以获取最新的使用次数
      this.$store.dispatch('user/getUserInfo');

      // 提示用户解锁成功
      uni.showToast({
        title: '解锁成功',
        icon: 'success',
        duration: 2000
      });
    },

    // 刷新漂流瓶
    refreshBottles() {
      // 检查是否存在漂流瓶组件
      if (this.$refs.bottlesComponent) {
        // 调用漂流瓶组件的刷新方法
        this.$refs.bottlesComponent.refreshBottles();
        // 显示提示
        /* this.$refs.toast.show({
          title: '漂流瓶已刷新',
          icon: 'refresh'
        }); */
      }
    },

    // 添加倒计时相关方法
    initCountdown() {
      // 计算下一个12点的时间
      const now = new Date();
      const nextNoon = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        12,
        0,
        0
      );

      // 如果当前时间已经过了今天的12点，则设置为明天的12点
      if (now > nextNoon) {
        nextNoon.setDate(nextNoon.getDate() + 1);
      }

      this.nextRecommendTime = nextNoon.getTime();
      this.updateCountdown();

      // 清除之前的定时器
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
      }

      // 设置定时器，每秒更新一次倒计时
      this.countdownTimer = setInterval(() => {
        this.updateCountdown();
      }, 1000);
    },

    updateCountdown() {
      if (!this.nextRecommendTime) return;

      const now = new Date().getTime();
      const diff = this.nextRecommendTime - now;

      if (diff <= 0) {
        // 倒计时结束，重新初始化
        clearInterval(this.countdownTimer);
        this.initCountdown();
        return;
      }

      // 计算时分秒
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      // 格式化时间
      this.nextRecommendTimeFormatted =
        `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
    },

    padZero(num) {
      return num < 10 ? `0${num}` : num;
    },

    clearCountdownTimer() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
      }
    },
  },

  created() {
    // 检测设备类型
    const platform = uni.getSystemInfoSync().platform;
    this.isIOS = platform === 'ios';

    // 初始化倒计时
    this.initCountdown();
    // ... existing code if any ...
  },

  onHide() {
    // 页面隐藏时清除定时器
    this.clearCountdownTimer();
    // ... existing code if any ...
  },

  beforeDestroy() {
    // 组件销毁前清除定时器
    this.clearCountdownTimer();
    // ... existing code if any ...
  },
};
</script>

<style lang="scss" scoped>

// 导航栏样式（删除.custom-nav嵌套层级）
  .nav-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #e0e0e0;
    position: relative;
    text-align: center;
    height: 70rpx;

    &::after {
      content: '';
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 4rpx;
      background: linear-gradient(90deg, #8eac21, #B3F73C);
      border-radius: 2rpx;
    }
  }

  .nav-left {
    display: flex;
    align-items: center;
    margin-left: 30rpx;

    .filter-btn {
      display: flex;
      align-items: center;
      background-color: rgba(179, 247, 60, 0.1);
      padding: 12rpx 24rpx;
      border-radius: 36rpx;
      color: #B3F73C;
      z-index: 9999;

      .tn-icon-filter {
        margin-right: 8rpx;
        font-size: 28rpx;
      }

      .btn-text {
        font-size: 24rpx;
        font-weight: 500;
      }

      &:active {
        opacity: 0.8;
        transform: scale(0.98);
      }
    }
  }

.container {
  background-color: #020303;

  // 卡片容器样式
  .cards-container {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx;
    position: relative;

    // 加载动画
    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .loading-spinner {
        width: 80rpx;
        height: 80rpx;
        border: 6rpx solid rgba(179, 247, 60, 0.3);
        border-top: 6rpx solid #B3F73C;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20rpx;
      }

      .loading-text {
        color: #FFFFFF;
        font-size: 32rpx;
        opacity: 0.8;
      }
    }

    // 卡片样式
    .card {
      position: absolute;
      width: 90%;
      height: calc(100% - 30rpx);
      border-radius: 30rpx;
      overflow: hidden;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
      transition: transform 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;

      // 会员卡片特殊样式
      &.vip-card {
        box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 6rpx;
          background: linear-gradient(90deg, #FFD700, #FFA500);
          z-index: 10;
        }
      }

      // 方向指示器
      .direction-indicator {
        position: absolute;
        top: 40rpx;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 4rpx solid;
        border-radius: 20rpx;
        padding: 10rpx 40rpx;
        transform: rotate(-20deg);

        .indicator-icon {
          font-size: 40rpx;
          margin-bottom: 5rpx;
        }

        .indicator-text {
          font-size: 28rpx;
          font-weight: bold;
        }
      }

      .like-indicator {
        right: 40rpx;
        color: #B3F73C;
        border-color: #B3F73C;
        background-color: rgba(179, 247, 60, 0.15);
      }

      .skip-indicator {
        left: 40rpx;
        color: #F75353;
        border-color: #F75353;
        background-color: rgba(247, 83, 83, 0.15);
      }

      // 卡片内部样式
      .card-inner {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;

        // 用户头像区域
        .card-image {
          width: 100%;
          height: 100%;
          position: relative;

          image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          // 渐变遮罩
          .image-gradient {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
          }

          // 照片数量指示器
          .photo-count {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 30rpx;
            padding: 8rpx 20rpx;
            display: flex;
            align-items: center;
            color: #FFFFFF;
            z-index: 5;

            .tn-icon-image {
              font-size: 28rpx;
              margin-right: 6rpx;
            }

            text {
              font-size: 24rpx;
            }
          }
        }

        // 用户信息区域
        .user-info {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 40rpx;
          color: #FFFFFF;

          // 用户名和年龄行
          .user-name-row {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            .user-name {
              font-size: 40rpx;
              color: #FFFFFF;
              margin-right: 10rpx;

              &.vip-name {
                background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
                background-size: 200% 100%;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                text-shadow: 0 2rpx 10rpx rgba(255, 215, 0, 0.3);
                animation: shineText 2s linear infinite;
              }
            }

            .user-age {
              font-size: 30rpx;
              color: rgba(255, 255, 255, 0.8);
            }

            // 添加性别图标样式
            .gender-icon {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0 10rpx;

              &.male {
                background-color: rgba(64, 158, 255, 0.2);
                color: #409EFF;
              }

              &.female {
                background-color: rgba(255, 109, 151, 0.2);
                color: #FF6D97;
              }

              .tn-icon-sex-male, .tn-icon-sex-female {
                font-size: 24rpx;
              }
            }

            // 添加会员标识样式
            .vip-badge {
              height: 32rpx;
              padding: 0 10rpx;
              background: linear-gradient(90deg, #FFD700, #FFA500);
              border-radius: 16rpx;
              display: flex;
              align-items: center;
              margin-right: 10rpx;

              .tn-icon-vip-fill {
                font-size: 24rpx;
                color: #FFFFFF;
                margin-right: 4rpx;
              }

              .vip-text {
                font-size: 20rpx;
                color: #FFFFFF;
                font-weight: bold;
              }
            }

            // 添加认证标识样式
            .verified-badge {
              height: 32rpx;
              padding: 0 10rpx;
              background: linear-gradient(90deg, #3C9BF7, #00C4FF);
              border-radius: 16rpx;
              display: flex;
              align-items: center;
              margin-right: 10rpx;

              .tn-icon-check {
                font-size: 24rpx;
                color: #FFFFFF;
                margin-right: 4rpx;
              }

              .verified-text {
                font-size: 20rpx;
                color: #FFFFFF;
                font-weight: bold;
              }
            }
          }

          // 位置信息行
          .user-location-row {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            font-size: 28rpx;
            opacity: 0.8;

            .location-text {
              margin: 0 10rpx;
            }
          }

          // 标签区域
          .user-tags {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20rpx;

            .tag {
              background-color: rgba(179, 247, 60, 0.2);
              color: #B3F73C;
              border-radius: 30rpx;
              padding: 6rpx 20rpx;
              margin-right: 20rpx;
              margin-bottom: 10rpx;
              font-size: 24rpx;
              box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
              border: 1rpx solid rgba(179, 247, 60, 0.5);
            }
          }

          // 会员特权标签
          .vip-privileges {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20rpx;

            .privilege-tag {
              background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
              color: #FFD700;
              border-radius: 20rpx;
              padding: 4rpx 16rpx;
              margin-right: 16rpx;
              margin-bottom: 8rpx;
              font-size: 22rpx;
              box-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.2);
              border: 1rpx solid rgba(255, 215, 0, 0.3);
            }
          }

          // 简介区域
          .user-intro {
            font-size: 28rpx;
            opacity: 0.8;
            line-height: 1.5;
            text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
          }
        }
      }

      // 喜欢/跳过状态样式
      &.like-direction {
        border: 2rpx solid rgba(179, 247, 60, 0.5);
      }

      &.skip-direction {
        border: 2rpx solid rgba(247, 83, 83, 0.5);
      }
    }

    // 特定卡片样式
    .top-card {
      z-index: 999; /* 确保顶层卡片始终在最上面 */
      will-change: transform; /* 优化动画性能 */
      touch-action: none; /* 防止浏览器默认触摸行为 */
    }

    .back-card {
      pointer-events: auto; /* 修改为允许底层卡片接收点击事件 */
    }

    // 没有更多卡片时的样式
    .no-more-cards {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 600rpx;
      padding: 60rpx 40rpx;
      border-radius: 24rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.6);
      z-index: 9999;

      .no-cards-icon {
        font-size: 120rpx;
        color: #B3F73C;
        margin-bottom: 30rpx;
      }

      .no-cards-text {
        font-size: 40rpx;
        color: #FFFFFF;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .no-cards-subtext {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 40rpx;
        text-align: center;
      }

      .countdown-timer {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 20rpx;
      }

      .time {
        font-size: 32rpx;
        color: #B3F73C;
      }

      .no-cards-buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;

        .action-btn {
          flex: 1;
          padding: 20rpx 30rpx;
          border-radius: 50rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 20rpx;
          box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.3);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          font-size: 24rpx;

          &:active {
            transform: scale(0.95);
            box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
          }
        }

        .vip-btn {
          background-color: #B3F73C;
          color: #020303;
          font-weight: bold;

          .vip-icon {
            font-size: 44rpx;
            margin-right: 8rpx;
            color: #020303;
          }
        }

        .bottle-btn-large {
          background-color: #3A404B;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          border: 1px solid rgba(255, 255, 255, 0.1);
          position: relative;

          .bottle-icon-large {
            position: relative;
            width: 36rpx;
            height: 50rpx;
            margin-right: 10rpx;

            .bottle-neck {
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 16rpx;
              height: 12rpx;
              background-color: rgba(255, 255, 255, 0.9);
              border-radius: 4rpx 4rpx 0 0;
            }

            .bottle-body {
              position: absolute;
              top: 12rpx;
              left: 50%;
              transform: translateX(-50%);
              width: 36rpx;
              height: 38rpx;
              background-color: rgba(255, 255, 255, 0.6);
              border-radius: 4rpx 4rpx 18rpx 18rpx;
              overflow: hidden;

              .bottle-wave {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 12rpx;
                background-color: rgba(179, 247, 60, 0.5);
              }
            }
          }

          .bottle-count {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
            min-width: 36rpx;
            height: 36rpx;
            padding: 0 8rpx;
            background-color: #B3F73C;
            color: #020303;
            border-radius: 18rpx;
            font-size: 22rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }

  // 底部操作按钮区域
  .action-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0 50rpx;

    .action-btn {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 30rpx;
      box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.4);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      position: relative;

      &:active {
        transform: scale(0.95);
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.4);
      }

      &.btn-active {
        transform: scale(1.1);
        box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.5);
      }

      .btn-icon {
        font-size: 48rpx;
      }

      .btn-count {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        min-width: 36rpx;
        height: 36rpx;
        padding: 0 8rpx;
        background-color: #B3F73C;
        color: #020303;
        border-radius: 18rpx;
        font-size: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
      }
    }

    .skip-btn {
      background-color: #F75353;

      .btn-icon {
        color: #FFFFFF;
      }
    }

    .message-btn {
      background-color: #3C9BF7;

      .btn-icon {
        color: #FFFFFF;
      }
    }

    .wechat-btn {
      background-color: #09BB07; // 微信绿色

      .btn-icon {
        color: #FFFFFF;
      }
    }

    .like-btn {
      background-color: #B3F73C;

      .btn-icon {
        color: #c398a0;
      }
    }
  }

  // 心形动画
  .heart-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    animation: heart-pulse 1s ease-out forwards;

    .heart-icon {
      font-size: 200rpx;
      color: #B3F73C;
      filter: drop-shadow(0 0 20rpx rgba(179, 247, 60, 0.5));
    }
  }

  // 叉号动画
  .cross-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    animation: cross-pulse 1s ease-out forwards;

    .cross-icon {
      font-size: 200rpx;
      color: #F75353;
      filter: drop-shadow(0 0 20rpx rgba(247, 83, 83, 0.5));
    }
  }
}

// 动画定义
@keyframes heart-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes cross-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5) rotate(360deg);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 引入animate.css动画类
.animate__animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

.animate__slideOutLeft {
  animation-name: slideOutLeft;
}

.animate__slideOutRight {
  animation-name: slideOutRight;
}

.animate__bounceBack {
  animation-name: bounceBack;
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100vw) rotate(-20deg);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100vw) rotate(20deg);
  }
}

@keyframes bounceBack {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(-30rpx) translateY(0);
  }
  50% {
    transform: translateX(20rpx) translateY(0);
  }
  75% {
    transform: translateX(-10rpx) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

// 匹配成功弹窗
.match-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999999999;
  display: flex;
  justify-content: center;
  align-items: center;

  .match-content {
    width: 650rpx;
    background-color: #0D1117;
    border-radius: 30rpx;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50rpx rgba(179, 247, 60, 0.3);

    // 背景霓虹效果
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(179, 247, 60, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(60, 155, 247, 0.1) 100%);
      z-index: -1;
    }

    .match-title {
      color: #B3F73C;
      font-size: 44rpx;
      font-weight: bold;
      margin-bottom: 40rpx;
      text-shadow: 0 0 20rpx rgba(179, 247, 60, 0.5);
    }

    .match-hearts {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;

      .match-heart {
        position: absolute;
        color: rgba(179, 247, 60, 0.2);

        &.heart1 {
          top: 10%;
          left: 10%;
          font-size: 80rpx;
          animation: floatHeart 4s ease-in-out infinite;
        }

        &.heart2 {
          top: 30%;
          right: 15%;
          font-size: 60rpx;
          animation: floatHeart 6s ease-in-out infinite 1s;
        }

        &.heart3 {
          bottom: 20%;
          left: 20%;
          font-size: 70rpx;
          animation: floatHeart 5s ease-in-out infinite 2s;
        }
      }
    }

    .match-avatars {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .avatar-container {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 4rpx solid #B3F73C;
        box-shadow: 0 0 20rpx rgba(179, 247, 60, 0.5);

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .avatar-connector {
        width: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .connector-heart {
          font-size: 60rpx;
          color: #B3F73C;
          animation: pulseHeart 1.5s ease-in-out infinite;
        }
      }
    }

    .match-name {
      color: #FFFFFF;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .match-desc {
      color: rgba(255, 255, 255, 0.7);
      font-size: 28rpx;
      text-align: center;
      margin-bottom: 40rpx;
    }

    .match-buttons {
      display: flex;
      width: 100%;

      .match-btn {
        flex: 1;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50rpx;
        font-size: 30rpx;
        margin: 0 20rpx;
      }

      .continue-btn {
        background-color: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
      }

      .chat-btn {
        background-color: #B3F73C;
        color: #0A0C13;
        font-weight: bold;
        box-shadow: 0 5rpx 15rpx rgba(179, 247, 60, 0.3);
      }
    }
  }
}

// 浮动心形动画
@keyframes floatHeart {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-30rpx) rotate(10deg);
  }
}

// 脉动心形动画
@keyframes pulseHeart {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

// VIP昵称闪烁动画
@keyframes shineText {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

// 添加新按钮样式
.more-btn {
  background-color: #3C9BF7;
  position: relative;

  &:active {
    background: linear-gradient(135deg, #8A6DD7, #7A5DC7);
  }

  .btn-icon {
    font-size: 40rpx;
	color: #FFFFFF;
  }

}

.bottle-btn {
  background: linear-gradient(135deg, #7A5DC7, #5D3EB0);

  &:active {
    background: linear-gradient(135deg, #8A6DD7, #6A4DB7);
  }
}

// 更多选项弹出菜单样式
.more-options {
  position: absolute;
  bottom: 220rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(35, 40, 50, 0.95);
  border-radius: 20rpx;
  padding: 15rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
  z-index: 1000;
  border: 1rpx solid rgba(122, 93, 199, 0.3);
  animation: fadeIn 0.2s ease-in-out;
  width: 272rpx;

  &::after {
    content: '';
    position: absolute;
    bottom: -16rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-top: 16rpx solid rgba(35, 40, 50, 0.95);
  }
}

.more-option {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 10rpx;
  transition: all 0.3s;
  position: relative;

  &:active {
    background-color: rgba(122, 93, 199, 0.2);
  }

  .option-icon {
    font-size: 44rpx;
    margin-right: 20rpx;
    color: #FFFFFF;
	width: 40rpx;
  }

  .option-text {
    font-size: 32rpx;
    color: #FFFFFF;
  }

  .option-count {
    position: absolute;
    right: 20rpx;
    min-width: 40rpx;
    height: 40rpx;
    padding: 0 10rpx;
    background-color: #B3F73C;
    color: #020303;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
  }
}

.option-icon {
  font-size: 40rpx;
  margin-right: 15rpx;
  color: #FFFFFF;
}

.option-text {
  color: #FFFFFF;
  font-size: 28rpx;
}

.message-option .option-icon {
  color: #3C9BF7;
}

.bottle-option .option-icon {
  color: #9A7DE8;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.bottle-icon {
  width: 48rpx;
  height: 60rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -4rpx;

  .bottle-neck {
    width: 20rpx;
    height: 12rpx;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 6rpx 6rpx 0 0;
    position: relative;
    z-index: 2;

    &::after {
      content: '';
      position: absolute;
      width: 10rpx;
      height: 4rpx;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 2rpx;
      top: 4rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .bottle-body {
    width: 40rpx;
    height: 48rpx;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4rpx 4rpx 20rpx 20rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(255, 255, 255, 0.4) 50%,
                  rgba(255, 255, 255, 0) 100%);
      z-index: 3;
    }

    .bottle-wave {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      height: 20rpx;
      background: linear-gradient(to right,
                  #3C9BF7 0%,
                  #7A5DC7 50%,
                  #3C9BF7 100%);
      border-radius: 50% 50% 0 0 / 10rpx 10rpx 0 0;
      animation: wave-move 3s linear infinite,
                 wave-color 5s ease-in-out infinite;
    }
  }
}

.bottle-icon-small {
  width: 40rpx;
  height: 46rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16rpx;

  .bottle-neck {
    width: 16rpx;
    height: 10rpx;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5rpx 5rpx 0 0;
    position: relative;
    z-index: 2;

    &::after {
      content: '';
      position: absolute;
      width: 8rpx;
      height: 3rpx;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 2rpx;
      top: 3rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .bottle-body {
    width: 30rpx;
    height: 36rpx;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4rpx 4rpx 15rpx 15rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(255, 255, 255, 0.4) 50%,
                  rgba(255, 255, 255, 0) 100%);
      z-index: 3;
    }

    .bottle-wave {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      height: 16rpx;
      background: linear-gradient(to right,
                  #3C9BF7 0%,
                  #7A5DC7 50%,
                  #3C9BF7 100%);
      border-radius: 50% 50% 0 0 / 8rpx 8rpx 0 0;
      animation: wave-move 3s linear infinite,
                 wave-color 5s ease-in-out infinite;
    }
  }
}

@keyframes wave-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes wave-color {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.6;
  }
}

/* 添加神秘人CSS3动画样式 */
.mystery-person {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
  position: relative;
  overflow: hidden;
}

.mystery-circle {
  position: absolute;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background: radial-gradient(circle, #333, #222);
  animation: pulse 2s infinite alternate;
}

.mystery-head {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #444;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 1;
  animation: float 3s ease-in-out infinite;
}

.mystery-body {
  width: 160rpx;
  height: 200rpx;
  border-radius: 80rpx;
  background-color: #444;
  position: relative;
  z-index: 1;
  animation: float 3s ease-in-out infinite 0.5s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15rpx);
  }
}

.mystery-person-small {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
  position: relative;
  overflow: hidden;
}

.mystery-circle-small {
  position: absolute;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: radial-gradient(circle, #333, #222);
  animation: pulse 2s infinite alternate;
}

.mystery-head-small {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #444;
  margin-bottom: 10rpx;
  position: relative;
  z-index: 1;
  animation: float 3s ease-in-out infinite;
}

.mystery-body-small {
  width: 140rpx;
  height: 180rpx;
  border-radius: 70rpx;
  background-color: #444;
  position: relative;
  z-index: 1;
  animation: float 3s ease-in-out infinite 0.5s;
}

@keyframes pulse-small {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes float-small {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10rpx);
  }
}

/* 在微信小程序中，修改分享按钮样式 */
// #ifdef MP-WEIXIN
button.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  line-height: 1;
  color: #ffffff;
  font-size: 28rpx;

  &::after {
    border: none;
  }
}
// #endif

/* 分享按钮样式 */
.share-btn {
  position: absolute;
  top: 90rpx;
  right: 20rpx;
  z-index: 10;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: #ffffff;
  font-size: 36rpx;
  border: none; /* 移除按钮边框 */
  padding: 0; /* 移除按钮内边距 */
  line-height: normal; /* 修复在小程序中的行高问题 */

  &::after {
    border: none; /* 移除按钮点击后的边框 */
  }
}

/* 刷新按钮 */
.refresh-btn {
  position: absolute;
  top: 180rpx; /* 位于分享按钮下方 */
  right: 20rpx;
  z-index: 10;
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: #ffffff;
  font-size: 36rpx;
}
</style>

